<template>
	<!--特色频道主页面-->
	<div class="feature-home-box">
		<!--我是新的特色频道页面-->
		<Banner></Banner>
		<div class="ts-connect-box">
			<!--<VideoInline :list="featureDataArray"  pageType="featurePage"></VideoInline>-->
			<!--{{$store.state.eduStore}}-->
			<ul class="h-great-list">
				<li v-for="v in featureDataArray" @click="clickLinkRoute(v.mrhpflag,v.id,v.intro,v.name)">
					<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" v-on:click.self.prevent/>
					<p>{{v.shortIntro}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import fun from '../../util/function'
	import Banner from './bannerCom/banner';
	export default {
		data() {
			return {
				featureDataArray: '', //特色频道列表
			}
		},
		components: {
			Banner,
		},
		created() {
			this.$store.dispatch("showNav");
			this.getFeatureDataList();
			this.$store.dispatch('setEduParentId','');
		    this.$store.dispatch('setEduChildId','');
		    this.$store.dispatch('setEduSonId','');//三级id		 
		},
		activated(){
           this.$store.dispatch('showNav');
		},
		destroyed() {
		   this.$store.dispatch('hideNav');
		},
		methods: {			
			getFeatureDataList() {
				let _this = this;
				//请求特色频道列表      
				_this.$http.get("/h5live/getTspdList").then(
					res => {
						if(res.data.code == '000000') {
							if(res.data.data.length) {
                               _this.featureDataArray = res.data.data;
							} else {
								console.log("特色频道数组为空")
							}

						} else {
							console.log("接口报错")
						}

					}
				);
			},
			clickLinkRoute(type, id, intro, name) {
				if(type == "3") { //每日汇评
					this.$router.push({
						path: `/${this.$channel}/dayComments`,
						query: {
							id: id,
						}
					})
				} else if(type == "1") {
					this.$router.push({
						path: `/${this.$channel}/featurePD_child`,
						query: {
							id: id,
						}
					})
				} else if(type == "2"){//乐知教育
					this.$router.push({
						path: `/${this.$channel}/educationHome`,
						query: {
							id: id,
						}
					})
				}else{
					console.log("出错")
				}
				let _this = this;
				var argumentData = {
					sessionId: "featureId_" + id, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
		}
	}
</script>

<style scoped="scoped">
	.feature-home-box {
		width: 100vw;
		height: 100vh;
	}
	
	.ts-connect-box {
		width: 750px;
		height: calc(100vh - 446px);
		overflow-y: scroll;
		background: white;
	}
	
	.h-great-list {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		width: 100%;
		padding: 0 30px 20px;
		font-size: 0;
	}
	
	.h-great-list li {
		width: 48%;
		margin-top: 22px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		/* Firefox */
		-webkit-box-sizing: border-box;
		/* Safari */
		background: rgba(255, 255, 255, 1);
	}
	
	/* .h-great-list li:nth-child(even) {
		margin-left: 30px;
	}
	 */
	.h-great-list li img {
		width: 100%;
		height: 187px;
		border-radius: 12px;
	}
	
	.h-great-list li p {
		width: 100%;
		margin-top: 10px;
		text-align: left;
		line-height: 40px;
		vertical-align: middle;
		font-size: 26px;
		text-align: justify;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.h-great-list-info {
		padding: 0 10px;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-flex-align-items: center;
	}
	
	.h-great-list-info i {
		font-size: 42px;
	}
	
	.h-great-list-info span {
		color: #000;
		font-size: 26px;
		height: 42px;
		line-height: 38px;
	}
</style>